"use client"
import React, { useEffect, useState } from 'react'
import { Flex, Layout, Table, Spin, Button  } from 'antd';
const { Header, Content } = Layout;
import { request } from '@/lib/request';

const headerStyle = {
  textAlign: 'center',
  color: '#fff',
  height: 64,
  paddingInline: 48,
  lineHeight: '64px',
  // backgroundColor: '#4096ff',
};
const contentStyle = {
  textAlign: 'center',
  minHeight: 120,
  lineHeight: '120px',
  color: '#fff',
  // backgroundColor: '#0958d9',
};
const layoutStyle = {
  borderRadius: 8,
  overflow: 'hidden',
  width: '100%',
};

// 表格
const columns = [
  {
    title: '股票编码',
    dataIndex: 'code',
  },
  {
    title: '股票名字',
    dataIndex: 'name',
  },
  {
    title: '最新价',
    dataIndex: 'latest_price',
    sorter: {
      compare: (a, b) => a.latest_price - b.latest_price,
      multiple: 7,
    },
  },
  {
    title: '涨跌幅',
    dataIndex: 'change_percent',
    sorter: {
      compare: (a, b) => a.change_percent - b.change_percent,
      multiple: 6,
    },
  },
  {
    title: '涨跌额',
    dataIndex: 'change_amount',
    sorter: {
      compare: (a, b) => a.change_amount - b.change_amount,
      multiple: 5,
    },
  },
  {
    title: '涨速',
    dataIndex: 'rise_speed',
    sorter: {
      compare: (a, b) => a.rise_speed - b.rise_speed,
      multiple: 4,
    },
  },
  {
    title: '5分钟涨跌',
    dataIndex: 'five_min_change',
    sorter: {
      compare: (a, b) => a.min_change - b.min_change,
      multiple: 3,
    },
  },
  {
    title: '60日涨跌幅',
    dataIndex: 'sixten_day_change_percent',
    sorter: {
      compare: (a, b) => a.sixten_day_change_percent - b.sixten_day_change_percent,
      multiple: 2,
    },
  },
  {
    title: '年初至今涨跌幅',
    dataIndex: 'year_to_date_change_percent',
    sorter: {
      compare: (a, b) => a.year_to_date_change_percent - b.year_to_date_change_percent,
      multiple: 1,
    },
  },
];
const page = () => {
  const [sharesList, setSharesList] = useState([]);

  const [loading, setLoading] = useState(true);

  const [updateShares, setUpdateShares] = useState(0);

  // 获取当前的最新数据
  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true); // 开始加载时显示加载中效果
        const response = await request.get('http://127.0.0.1:8000/getshars');
        // console.log(response.data.data);
        setSharesList([...response.data.data])
        setLoading(false)
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false)
      }
    };

    fetchData();
}, [updateShares]); 

// 获取最新数据
const handleClick = () => {
  setUpdateShares(prevShares => prevShares + 1);
  setOpenTime(new Date())
  console.log(updateShares);
};

const [openTime, setOpenTime] = useState(new Date());


const formatTime = (time) => {
      return time.toLocaleString();
  };

  return (
    <>
    <Flex gap="middle" wrap>
    <Layout style={layoutStyle}>
      <Header style={headerStyle}>当前股票数据{formatTime(openTime)}<Button type="primary" style={{marginLeft:'10px'}} onClick={handleClick}>点击获取当前最新数据</Button></Header>
      <Content style={contentStyle}>
      {loading ? (
                <Spin size="large" />
            ) : (
              <Table columns={columns} dataSource={sharesList}/>
            )}
        </Content>
    </Layout>
  </Flex>
    </>
  )
}

export default page
